<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟百度搜索</title>
    <style type="text/css">
        ul{
            list-style: none;
            padding-left:0 ;
        }
        /* 搜索提示项选中的文本颜色 */
        .selected{
            color: #00f;
        }
    </style>
</head>
<body>
    <!-- vue.js和vue-resouece.js
        Vue-resource发送跨域请求,this.$http.jsonp
        实现对接智能提示接口，并通过上下键选择提示项，按enter进行搜索 -->
    <div id="app">
        <!-- 按下向下键和按向上键选择的搜索提示项 -->
        <input type="text" v-model="info"  @keyup="search($event)" 
            @keydown.down="changeDown()" @keydown.up="changeUp()">
        <ul>
            <!-- 给class添加属性值，{属性:true/false}-->
            <li v-for="(item, i) in myData" :class="{selected:i===nowIndex}">{{item}}</li>
        </ul>
        <!-- <p v-show="myData.length == 0">暂无数据...</p> -->
    </div>
    <script src="https://cdn.bootcss.com/vue/2.1.7/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#app',
                data:{
                    //输入的搜索词
                    info:'',
                    //与输入的搜索词相关的提示项
                    myData:[],
                    //当前选中的提示项，初始为未选中状态
                    nowIndex:-1
                },
                methods:{
                    search(e){
                        //限制按下上下键进行搜索
                        if(e.keyCode==38 || e.keyCode==40){
                            return;
                        }               
                        //当按下回车键时实现搜索跳转功能
                        if(e.keyCode==13){
                            //跳转到真实的百度搜索
                            window.open('https://www.baidu.com/s?wd='+this.info);
                            //清空输入框
                            this.info='';
                        }
                        //使用vue-resource发送jsonp请求
                        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                            params:{
                               wd:this.info 
                            },
                            jsonp:'cb'
                        }).then(res=>{
                            //获得相关提示项，数组形式的数据在view中使用v-for遍历显示
                            // console.log(1,res.data)
                            this.myData=res.data.s;
                        });                       
                    },
                    //按下向下键搜索提示项下移
                    changeDown(){
                        this.nowIndex++;
                        //移到最后一个提示项
                        if(this.nowIndex==this.myData.length) {
                            this.nowIndex=-1;
                        }
                        // 输入框中显示当前选中的提示项
                        this.info=this.myData[this.nowIndex];
                    },
                    //按下向上键搜索提示项上移
                    changeUp: function(){
                        this.nowIndex--;
                        if (this.nowIndex==-2) {
                            this.nowIndex=this.myData.length;
                        }
                        this.info=this.myData[this.nowIndex];
                }
                    
                }                
            });
        }
    </script>
</body> 
</html>